<template>
  <div class="title1">
    <!-- 关联账号 -->
    <el-row>
      <el-col :span="24">
        <div class="title2">
          <div class="text">已关联账号</div>
          <button class="text1" @click="dialogVisible = true">关联账号></button>
        </div>
        <div style="display: flex;justify-content: space-between;height: 102px;">
          <div>
            <div class="title3" style="margin-left: 44px;">
              <span class="text">网点名称：</span>
              <span class="text1">{{ data.deptInfo  }}</span>
            </div>
            <div class="title3" style="margin-left: 44px;margin-top: 19px;">
              <span class="text">用户名：</span>
              <span class="text1">{{ data.userName }}</span>
              <span class="text" style="margin-left: 12px;">展示名称：</span>
              <span class="text1">{{ data.userName }}</span>
              <span class="text" style="margin-left: 12px;">员工编号：</span>
              <span class="text1">{{ data.userCode }}</span>
            </div>
          </div>
          <div class="title4">
            <button class="bt">当前账号</button>
            <button class="bt bt1">解除关联</button>
          </div>
        </div>
        <div class="line" />
        <el-dialog
          title="关联账号"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
          class="title5"
        >
          <div class="line" style="margin-top: -30px;" />
          <div class="title">
            <div id="1" style="background-color: #2087D0;" class="text"><div style="color: #fff;" class="text1">1</div></div>
            <button id="1" style="font-weight: 600;" class="text2">账号密码</button>
            <div class="line1" />
            <div id="2" :class="id==='2'?'active1':''" class="text"><div :class="id==='2'?'active3':''" class="text1">2</div></div>
            <button id="2" :class="id==='2'?'active':''" class="text2">短信验证</button>
          </div>
          <!-- 短信验证 -->
          <div v-if="id==='2'">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="70px" class="demo-ruleForm">
              <el-form-item class="title1" label="手机号" prop="phone">
                <el-input v-model="ruleForm.phone" maxlength="11" style="width: 401px;" class="input" placeholder="请输入" />
              </el-form-item>
              <el-form-item class="title1" label="验证码" prop="code" style="margin-top: 30px;">
                <el-input v-model="ruleForm.code" maxlength="6" class="input" style="width: 268px;" type="text" placeholder="请输入" />
                <el-button
                  class="bt"
                  style="width: 122px;
                  height: 42px;
                  background: #2087D0;
                  border-radius: 21px;
                  margin-left: 11px;
                  font-size: 18px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #FFFFFF;"
                  @click="testandFn()"
                >获取验证码</el-button>
              </el-form-item>
            </el-form></div>
            <!-- 账号密码 -->
          <div v-if="id==='1'">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="70px" class="demo-ruleForm">
              <el-form-item class="title1" label="用户名" prop="name">
                <el-input v-model.trim="ruleForm.name" maxlength="5" style="width: 401px;" class="input" placeholder="请输入" />
              </el-form-item>
              <el-form-item class="title1" label="密码" prop="password" style="margin-top: 30px;">
                <el-input v-model.trim="ruleForm.password" class="input" style="width: 401px;" type="text" placeholder="请输入" />
              </el-form-item>
            </el-form>
            <div style="width: 462px;margin-left: 65px;" class="text4">提示：如果忘记密码，可通过网点管家-网点管理-员工资料修改该用
              户密码字段：品工编号/系统密码* 以上仅有六位数管理员账号角色才
              可修改密码</div>
          </div>
          <span v-if="id==='2'" slot="footer" class="dialog-footer">
            <el-button class="bt" type="primary" @click="Ok('ruleForm')">确认关联</el-button>
          </span>
          <span v-if="id==='1'" slot="footer" class="dialog-footer">
            <el-button type="primary" class="bt3" @click="submitForm('ruleForm')">下一步</el-button>
            <el-button class="bt4" @click="dialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {sendSms,loginVerifyApi,relationApi,getUserInfoApi} from '@/api/user'
export default {

  components: {},
  data() {
    return {
      dialogVisible: false,
      userid:'',
      data:{},
      ruleForm: {
        name: '',
        password: '',
        phone: '',
        code: ''
      },
      code:'',
      id: '1',
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度至少6位', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, message: '请输入11位手机号', trigger:  'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 1, max: 6, message: '验证码错误', trigger: 'blur' }
        ]
      }
    }
  },

  computed: {},

  created() {},
  mounted(){
 this.getUserInfoFn()
  },

  methods: {
      //获取个人信息
   async getUserInfoFn(){
     let res=await getUserInfoApi()
     if(res.code==200){
       this.data=res.data
     }
     console.log(res,'个人信息')
    },
    submitForm(formName) {
      this.$refs[formName].validate( async (valid) => {
        if (valid) {
          // if(this.code==this.ruleForm.code){
          
         
          // }else{
          //   this.$message.error('验证码输入有误')
          // }
         let res=await  loginVerifyApi({
           "code": "",
           "password": this.ruleForm.password,
           "username": this.ruleForm.name,
           "uuid": ""
           })
           console.log(res)
         if(res.code==200){
          this.id = '2'
          this.userid=res.data.userId
          this.$message.success(res.msg)
         }else{
          
         }
        
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose(){
      this.dialogVisible=false
    },
   async testandFn(){
      console.log('获取验证码')
      if(this.ruleForm.phone!=='' ){
      console.log(this.ruleForm.phone.split('').length)
      if(this.ruleForm.phone.split('').length<11){
        this.$refs.ruleForm.validateField('phone');
      }else{
      let res=await sendSms(
         { "areaCode":"",
            "phone": this.ruleForm.phone
           })
           if(res.code==200){
             this.$message.success(res.msg)
            this.code= res.data.code
           }else{
            
           }
          console.log(res,'1111')
    }
      
    }else{
      this.$refs.ruleForm.validateField('phone');
    }
    },
    Ok(formName) {
      var _this=this
      console.log('id',this.userid)
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
           if(this.code==this.ruleForm.code){
            let res=await relationApi({
              "sysUserId":_this.userid
            })
            if(res.code==200){
              this.$message.success('关联成功')
              this.dialogVisible = false
            }
           
          }else{
            this.$message.error('验证码输入有误')
          }
          
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}

</script>
<style  scoped lang="scss">
.title1{
  margin-left: 48px;
}
.title2{
  display: flex;
  justify-content: space-between;
height: 57px;
background: #F5F5F5;
border-radius: 4px 4px 0px 0px;
line-height: 57px;
.text{
margin-left: 25px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 600;
color: #333333;
}
.text1{
  border: 1px #F5F5F5 solid;
  font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #2087D0;
margin-right: 30px;
background-color: #F5F5F5;
}
}
.title3{
  margin: 30px 0 0 73px;
  display: flex;
  .text{
    font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
  }

  .text1{
    font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
  }
}
.title4{
  line-height: 102px;
  .bt{
    width: 132px;
height: 42px;
background: #2087D0;
border-radius: 21px;
margin-right: 20px;
color: #fff;
border: 1px #2087D0 solid;

  }
  .bt1{
    margin-right: 30px;
    background: #F5F5F5;
    border: 1px #F5F5F5 solid;
    color: #999999;
  }
}
.line{
  height: 1px;
background: #EBECEE;
}
.title5{
font-weight: 600;
height: 1000px;
.title{
  display: flex;
  margin-left: 60px;
  margin-top: 48px;
  .text{
    width: 42px;
height: 42px;
border-radius: 21px;
border: 1px #EBECEE solid;
.text1{
  line-height: 42px;
  text-align: center;
  color: #ccc;
}
  }
  .text2{
    font-size: 18px;
font-family: Source Han Sans CN;
color: #333333;
// margin-top: 10px;
margin-left: 12px;
border: 1px #fff solid;
background-color: #fff;
  }
  .active{
    font-weight: 600;
  }
  .active1{
    background: #2087D0;
  }
  .active3{
    color: #fff;
  }
  .line1{
    width: 148px;
height: 2px;
background: #EBECEE;
border-radius: 1px;
margin-top: 20px;
margin: 20px 16px;
  }
}
.text4{
    font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #EE3000;
line-height: 24px;
margin-top: 36px;
  }
.title1{
  margin-top: 76px;
  .text{
    display: flex;
    .input{
      width: 401px;
height: 42px;
background: #FFFFFF;
border: 1px solid #B4B4B4;
border-radius: 4px;
margin-left: 12px;
outline: none;
    }
    .text1{
      margin-top: 13px;
      margin-left: 3px;
    }
    .spa{
      color: red;
      margin-top: 13px;
    }
    .bt{
      width: 122px;
height: 42px;
background: #2087D0;
border-radius: 21px;
margin-left: 11px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
border: 1px #2087D0 solid;

    }
  }
}
.dialog-footer{
  .bt{

    width: 264px;
  height: 48px;
  background: #2087D0;
  border-radius: 24px;
  margin-right: 150px;
  font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 110px;
  }
  .bt3{
    width: 120px;
height: 48px;
background: #2087D0;
border-radius: 24px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
  }
  .bt4{
    width: 100px;
height: 48px;
background: #FFFFFF;
border: 1px solid #B4B4B4;
border-radius: 24px;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #999999;
  }
}
}
</style>
